<template>
  <div>
    <a-card>
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :xxl="6" :lg="8" :sm="8">
              <a-form-item label="名称">
                <a-input style="width: 220px" v-model="queryParam.f_name_" placeholder="请输入名称" />
              </a-form-item>
            </a-col>
            <a-col :xxl="6" :lg="8" :sm="8">
              <a-form-item label="分类">
                <a-select
                  v-model="category"
                  style="width: 80%"
                  mode="tags"
                  placeholder="请选择分类(可手动输入)"
                  showSearch
                  @change="selectChange"
                >
                  <a-select-option
                    v-for="(item, index) in categoryList"
                    :key="item.category_ + index"
                    :value="item.category_"
                  >
                    {{ item.category_ }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="8 || 24" :sm="24">
              <span class="table-page-search-submitButtons">
                <a-button type="primary" @click="searchAct_dsn_form_define" icon="search">查询</a-button>
                <a-button icon="reload" style="margin-left: 8px" @click="reQuery">重置</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>

      <div style="margin-bottom: 16px">
        <a-button type="primary" style="margin-left: 8px" @click="handleOperation('add')" icon="plus"
          >添加流程表单</a-button
        >
      </div>
      <a-table
        :scroll="{ x: 1500, y: 550 }"
        :columns="ucolumns"
        :data-source="udata"
        :pagination="upagination"
        :loading="loading"
        rowKey="id"
        @change="tableChange"
        size="middle"
        :bordered="ubordered"
      >
        <span slot="serial" slot-scope="text, record, index">
          {{ (upagination.current - 1) * upagination.pageSize + parseInt(index) + 1 }}
        </span>
        <span slot="name_" slot-scope="text, record">
          {{ text }}
          <a-tag v-if="record.enable == 3201" color="#f50">停用</a-tag>
        </span>
        <span slot="lasttime_" slot-scope="text">
          {{ $moment(text).format('YYYY-MM-DD') }}
        </span>
        <span slot="publish" slot-scope="text"> {{ text == 3200 ? '已发布' : '未发布' }} </span>
        <span slot="operation" slot-scope="text, record">
          <!-- <template v-auth:Act_dsn_form_define_view>
            <a @click="handleOperation('edit', record)">详情</a>
          </template> -->
          <template>
            <a-dropdown :trigger="['click']">
              <a class="ant-dropdown-link" @click.prevent>详情<a-icon type="down" /></a>
              <template #overlay>
                <a-menu>
                  <a-menu-item>
                    <a @click="showProcTaskUser(record)">流程人员</a>
                  </a-menu-item>
                  <a-menu-item>
                    <a @click="handleOperation('edit', record)">表单详情</a>
                  </a-menu-item>
                </a-menu>
              </template>
            </a-dropdown>
          </template>
          <template>
            <a-divider type="vertical" />
            <a @click="handleOperation('edit', record)">编辑</a>
          </template>
          <template v-if="record.enable == 3200">
            <a-divider type="vertical" />
            <a-popconfirm
              title="确定停用吗？"
              ok-text="确定"
              cancel-text="取消"
              @confirm="enableAct_dsn_form_defineById(record.id, 3201)"
            >
              <a-icon slot="icon" type="delete" />
              <a href="javascript:;">停用</a>
            </a-popconfirm>
          </template>
          <template v-if="record.enable == 3201">
            <a-divider type="vertical" />
            <a @click="enableAct_dsn_form_defineById(record.id, 3200)">启用</a>
          </template>
        </span>
      </a-table>
    </a-card>
    <Wf_ProcTaskUsers ref="procTaskUser"></Wf_ProcTaskUsers>
  </div>
</template>

<style lang="less" src="@/style/base.less"></style>

<script>
import { queryAct_dsn_form_defineList, enable, queryCategory } from '@/api/workflow/act_dsn_form_define.js'

// 没有用到枚举作为查询条件的请删除
import { queryEnumerationValuesByName } from '@/api/base/enumeration'
import Wf_ProcTaskUsers from '@/views/workflow/Wf_ProcTaskUsers.vue'

export default {
  data() {
    return {
      loading: false, // 遮罩是否显示
      ubordered: false, // 表格边框是否显示
      queryParam: {
        pageSize: 20,
        pageNumber: 1,
        sort: 'lasttime',
        f_category_: '',
        f_name_: '',
        f_version_: 0,
      }, // 查询条件
      selectedRowKeys: [], // 选中的行id
      udata: [], // 表格数据
      upagination: {
        // 表格分页参数
        defaultPageSize: 20,
        total: 0,
        current: 1,
        pageSize: 20,
        showTotal: (total) => `共${total}条数据`,
        showSizeChanger: true,
        pageSizeOptions: ['10', '20', '50', '100'],
      },
      ucolumns: [
        {
          title: '序号',
          width: '50px',
          align: 'center',
          fixed: 'left',
          scopedSlots: { customRender: 'serial' },
        },

        {
          title: '流程名称',
          dataIndex: 'name_',
          align: 'left',
          scopedSlots: { customRender: 'name_' },
        },
        {
          title: '分类',
          dataIndex: 'category_',
          align: 'left',
          width: 300,
        },
        {
          title: '最后修改时间',
          dataIndex: 'lasttime_',
          width: 150,
          align: 'center',
          sorter: true,
          align: 'center',
          scopedSlots: { customRender: 'lasttime_' },
        },
        {
          title: '状态',
          dataIndex: 'publish',
          width: 150,
          align: 'center',
          scopedSlots: { customRender: 'publish' },
        },
        {
          title: '操作',
          dataIndex: 'action',
          width: '150px',
          fixed: 'right',
          scopedSlots: { customRender: 'operation' },
        },
      ], // 表头
      importVisible: false, // 是否显示导入数据弹窗
      importExcelFile: {}, // 导入模板文件
      categoryList: [],
      category: [],
      visible: false, //人员配置是否显示
    }
  },
  created() {
    // 没有用到枚举作为查询条件的请删除
    // this.findEnumByName();
    this.findAct_dsn_form_defineList(this.queryParam)
    queryCategory().then((res) => {
      console.log('前十分类', res)
      if (res.code == 0 && res.data) {
        this.categoryList = res.data
      }
    })
  },
  methods: {
    // 下拉分类的值
    selectChange(value) {
      console.log('val', value)
      if (value.length > 1) {
        this.category.splice(0, this.category.length - 1)
      }
      if (this.category.length) {
        this.queryParam.f_category_ = this.category[0]
      } else {
        this.queryParam.f_category_ = ''
      }
    },
    /**
     *  查询枚举值,没有用到枚举作为查询条件的请删除
     */
    findEnumByName() {
      const parameter = []
      parameter.forEach((item) => {
        queryEnumerationValuesByName({ enName: item.enumName }).then((res) => {
          console.log('query' + item.enumName, res.data)
          this[`${item.enname}List`] = res.data
          this[`${item.enname}List`].unshift({ id: '', description: '全部' })
          console.log(this[`${item.enname}List`])
        })
      })
    },
    /**
     *  查询流程表单定义列表
     */
    findAct_dsn_form_defineList(queryParam) {
      const a = Date.now()
      console.log('queryParam', queryParam)
      queryAct_dsn_form_defineList(queryParam).then((res) => {
        console.log('表格数据', res)
        this.loading = true
        this.udata = res.data.records || []
        // 将当前页码和数量与后台绑定
        this.upagination.total = res.data.total
        this.upagination.current = res.data.current
        this.upagination.pageSize = res.data.size
        // 如果查询时间太短就给一个0.5秒的加载效果
        const b = Date.now()
        if (b - a < 500) {
          setTimeout(() => {
            this.loading = false
          }, 500)
        } else {
          this.loading = false
        }
      })
    },
    /**
     * 重置查询条件并查询数据
     */
    reQuery() {
      this.category = []
      this.queryParam = {
        pageSize: 20,
        pageNumber: 1,
        sort: 'lasttime',
        f_category_: '',
        f_name_: '',
        f_version_: 0,
      }
      this.findAct_dsn_form_defineList(this.queryParam)
    },
    /**
     * 翻页、设置页数量时触发，将分页组建的当前页与大小传给后台
     */
    tableChange(pagination, filters, sorter, { currentDataSource }) {
      this.queryParam.pageNumber = pagination.current
      this.queryParam.pageSize = pagination.pageSize
      if (sorter != null && sorter.order != null) {
        console.log(
          'sorter.order.substring(0, sorter.order.length - 3)',
          sorter.order.substring(0, sorter.order.length - 3)
        )
        this.queryParam.sort = sorter.field
        this.queryParam.order = sorter.order.substring(0, sorter.order.length - 3)
      }
      this.findAct_dsn_form_defineList(this.queryParam)
    },
    /**
     * 查询
     */
    searchAct_dsn_form_define() {
      // 查询时将当前页码重置为1，否则会出现有数据但不显示的问题
      this.queryParam.pageNumber = 1
      // this.upagination.current = 1
      this.findAct_dsn_form_defineList(this.queryParam)
    },
    /**
     * 进入编辑页面
     */
    handleOperation(operation, record) {
      this.$router.push({ path: `/Wf_FormGuide/${operation}/${record ? record.id : undefined}` })
    },
    /**
     * 停用流程表单定义
     */
    enableAct_dsn_form_defineById(id, eb) {
      enable(id, eb).then((res) => {
        if (res.code !== 0) {
          this.$message.warning(res.msg)
        } else {
          this.searchAct_dsn_form_define()
          this.$message.success(`${eb == 3200 ? '启用' : '停用'}成功`)
        }
      })
    },

    /**
     * 打开人员配置抽屉
     */
    showProcTaskUser(record) {
      this.visible = true
      this.$refs.procTaskUser.showDrawer(this.visible,record.name_)
      this.$nextTick(() => this.$refs.procTaskUser.listProcTaskUser(record.key_, ''))
    },
  },
  components: {
    Wf_ProcTaskUsers,
  },
}
</script>